<template>
  <div class="base-main">
    <van-nav-bar title="智能住房管理平台" fixed safe-area-inset-top>
      <template #right>
        <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="18"/>
        <span @click="onCertificate">{{ userName }}</span>
      </template>
    </van-nav-bar>
    <router-view class="base-content" />
    <van-tabbar v-model="active" @change="onChangeTab">
      <van-tabbar-item name="home" icon="home-o" >首页</van-tabbar-item>
      <van-tabbar-item name="service" icon="wap-home-o">入住服务</van-tabbar-item>
      <van-tabbar-item name="mine" icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'BaseMain',
  data () {
    return {
      active: this.$route.name,
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo,
    }),
    userName() {
      return this.userInfo.name ? this.userInfo.name: '未认证';
    }
  },
  watch: {
    $route(to, from) {
      this.active = to.name;
    }
  },
  methods: {
    onChangeTab(name) {
      this.$router.push(name);
    },
    onCertificate(){
      if (this.userName === '未认证') {
        this.$router.push('certificate');
      }
    }
  },
}
</script>

<style lang="less" scoped>
  .base-main {
    height: 100%;
    width: 100%;
    overflow: hidden;

    .base-content {
      height: calc(100% - 96px);
      width: 100%;
      overflow: auto;
      margin: 46px 0 50px 0;
    }
  }
</style>
